<template>
<div class="footer">
  <div class="flex footer-link">
    <!-- 福州 -->
    <div class="footer-link-item">
      <p class="footer-link-item-title fs-b">地址</p>
      <div class="bold-line mgt2"></div>
      <div class="normal-line"></div>
      <div class="footer-link-item-text" v-if="siteConfig && siteConfig.address">
        <img src="static/images/home/u160@2x.png" alt="" >
        <span class="mgl2 fs-m hand" @click="jump(1)">{{siteConfig.address}}</span>
      </div>
      <div class="footer-link-item-text" v-if="siteConfig && siteConfig.contact_phone">
        <img src="static/images/home/u162@2x.png" alt="" >
        <span class="mgl2 fs-m hand" @click="jump(2)">{{siteConfig.contact_phone}}</span>
      </div>
      <div class="footer-link-item-text" v-if="siteConfig && siteConfig.qq_service">
        <img src="static/images/home/qq.png" alt="" >
        <span class="mgl2 fs-m">{{siteConfig.qq_service}}</span>
      </div>
    </div>
    <!-- 产品中心 -->
    <div class="footer-link-item">
      <p class="footer-link-item-title fs-b">产品中心</p>
      <div class="bold-line mgt2"></div>
      <div class="short-line"></div>
      <div
        class="footer-link-item-text fs-m hand"
        v-for="(item, index) in productNavsArr"
        :key="index"
        @click="handleProduct(item)"
      >{{item.label}}</div>
    </div>
    <!-- 战略优势 -->
    <div class="footer-link-item">
      <p class="footer-link-item-title fs-b">战略优势</p>
      <div class="bold-line mgt2"></div>
      <div class="short-line"></div>
      <!-- <div class="footer-link-item-text fs-m hand" @click="$router.push({name: 'home'})">服务与支持</div>
      <div class="footer-link-item-text fs-m hand" @click="$router.push({name: 'home'})">行业应用</div> -->
      <div
        v-for="(item, index) in marketNavsArr"
        :key="index"
        class="footer-link-item-text fs-m hand"
        @click="handleMarkeWorks(item)"
      >作品市场</div>
      <div class="footer-link-item-text fs-m hand" @click="$router.push({name: 'panomap'})">全景地图</div>
    </div>
    <!-- 新闻资讯 -->
    <div class="footer-link-item" v-if="showInfoNavs">
      <p class="footer-link-item-title fs-b">新闻资讯</p>
      <div class="bold-line mgt2"></div>
      <div class="short-line"></div>
      <!-- , query: {t: item.id} -->
      <div class="footer-link-item-text fs-m hand" @click="$router.push({name: 'news'})" v-for="(item, index) in infoNavsArr" :key="index">{{item.name}}</div>
    </div>
    <!-- 二维码 -->
    <div class="footer-link-item flex">
      <div class="mgr2" v-if="siteConfig && siteConfig.full_qrcodeurl">
        <!-- <img :src="siteConfig.full_qrcodeurl" alt="" style="width: 130px;height: 130px;"> -->
        <el-image :src="siteConfig.full_qrcodeurl" style="width: 130px;height: 130px;">
          <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
        </el-image>
        <p class="tac mgt2 fs-m">扫一扫关注公众号</p>
      </div>
      <div v-if="siteConfig && siteConfig.full_wxacodeurl">
        <!-- <img :src="siteConfig.full_wxacodeurl" alt="" style="width: 130px;height: 130px;"> -->
        <el-image :src="siteConfig.full_wxacodeurl" style="width: 130px;height: 130px;">
          <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
        </el-image>
        <p class="tac mgt2 fs-m">微信客服</p>
      </div>
    </div>
  </div>
  <!-- <div class="footer-copy" v-if="siteConfig && siteConfig.copyright_content">{{siteConfig.copyright_content}}</div> -->
  <div class="footer-copy" v-if="siteConfig && siteConfig.copyright_content" v-html="siteConfig.copyright_content"></div>
</div>
</template>

<script>
// [
//   {label: 'VR全景', name: '1', path: 'product'},
//   {label: 'VR视频', name: '2', path: 'product'},
//   {label: 'VR房地产', name: '4', path: 'product'},
//   {label: 'VR展厅', name: '7', path: 'product'},
//   {label: 'VR旅游', name: '8', path: 'product'},
//   {label: 'VR直播', name: '3', path: 'product'},
//   {label: 'VR行走漫游', name: '9', path: 'product'},
//   {label: '360环物', name: '6', path: 'product'},
//   {label: '3D模型', name: '5', path: 'product'}
// ]

// var arr = [
//   {id: 1, name: '首页', level: 0, parent_id: 0},
//   {id: 2, name: '产品', level: 0, parent_id: 0},
//   {id: 3, name: 'VR全景', level: 1, parent_id: 2},
//   {id: 4, name: 'VR视频', level: 1, parent_id: 2},
//   {id: 5, name: 'VR房地产', level: 1, parent_id: 2},
//   {id: 6, name: 'VR展厅', level: 1, parent_id: 2},
//   {id: 7, name: 'VR旅游', level: 1, parent_id: 2},
//   {id: 8, name: 'VR直播', level: 1, parent_id: 2},
//   {id: 9, name: 'VR行走漫游', level: 1, parent_id: 2},
//   {id: 10, name: '360环物', level: 1, parent_id: 2},
//   {id: 11, name: '3D模型', level: 1, parent_id: 2},
//   {id: 12, name: '作品市场', level: 0, parent_id: 0},
//   {id: 13, name: '作者', level: 0, parent_id: 0},
//   {id: 14, name: '新闻资讯', level: 0, parent_id: 0},
//   {id: 15, name: '关于我们', level: 0, parent_id: 0}
// ]

import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['infoNavs', 'siteConfig', 'siteMenu']),
    // 资讯底部信息
    infoNavsArr () {
      if (this.infoNavs) {
        return this.infoNavs.slice(0, 4)
      }
      return []
    },
    showInfoNavs () {
      let judge = false
      if (this.siteMenu && this.siteMenu.length > 0) {
        this.siteMenu.map(item => {
          if (item.menu_id === 5000) {
            judge = true
          }
        })
      }
      return judge
    },
    // 作品市场
    marketNavsArr () {
      let menuArr = []
      if (this.siteMenu && this.siteMenu.length > 0) {
        this.siteMenu.map(item1 => {
          if (item1.menu_id === 3000) {
            menuArr.push({label: item1.name, path: 'panomarket', menu_url: item1.menu_url})
          }
        })
      }
      return menuArr
    },
    // 产品中心底部
    productNavsArr () {
      let menuArr = []
      if (this.siteMenu && this.siteMenu.length > 0) {
        this.siteMenu.map(item1 => {
          if (item1 && item1.functions && item1.functions.length > 0) {
            item1.functions.map(item2 => {
              if (item2.menu_id === 2001) {
                menuArr.push({label: item2.name, name: '1', path: 'product', menu_url: item2.menu_url})
              }
              if (item2.menu_id === 2004) {
                menuArr.push({label: item2.name, name: '4', path: 'product', menu_url: item2.menu_url})
              }
              if (item2.menu_id === 2008) {
                menuArr.push({label: item2.name, name: '8', path: 'product', menu_url: item2.menu_url})
              }
              if (item2.menu_id === 2009) {
                menuArr.push({label: item2.name, name: '9', path: 'product', menu_url: item2.menu_url})
              }
            })
          }
        })
      }
      return menuArr
    },
  },
  created() {
    this.$store.dispatch('getInfoType')
  },
  methods: {
    // 作品市场
    handleMarkeWorks (item) {
      if (item.menu_url) {
        window.open(item.menu_url, '_self')
      } else {
        this.$router.push({name: 'panomarket'})
      }
    },
    // 产品链接跳转
    handleProduct (item) {
      if (item.menu_url) {
        window.open(item.menu_url, '_self')
      } else {
        this.$router.push({name: 'product', query: {t: item.name}})
      }
    },
    // 跳转页面
    jump(val) {
      if (val == 1) {
        if (this.siteConfig) {
          let dataMap = `https://uri.amap.com/marker?position=${this.siteConfig.location_lng},${this.siteConfig.location_lat}&name=${this.siteConfig.company_name}&radius=110&src=mypage&coordinate=gaode&callnative=0&key=${$globalconfig.AMAP_KEY}`
          window.open(dataMap)
        }
      } else if (val == 2) {
        window.location.href = `tel:${this.siteConfig.contact_phone}`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.footer
  width 100%
  min-width 1200px
  height auto
  background-color #252525
  padding-bottom 30px
  margin-top 30px
  .footer-link
    justify-content center
    padding-top 35px
    .footer-link-item
      margin-right 73px
      color #FFFFFF
      .footer-link-item-text
        margin-top 17px
      .bold-line
        width 85px
        height 4px
        background #797979
      .normal-line
        width 260px
        height 1px
        background #797979
      .short-line
        width 118px
        height 1px
        background #797979

  .footer-copy
    text-align center
    height 15px
    font-size 14px
    font-family PingFang SC
    font-weight 400
    color #FFFFFF
    margin-top 58px
</style>